define("html-header", function(require) {
    let $ = require("jquery");
    let Vue = require("vue");
    
    if (typeof(window.html_header) != "undefined") return window.html_header;
    let headerApp;
    let headerApp_title;
    let headerApp_description;
    let exportObj = {};
    //$(() => {
    //let pos = $('script[x-id="header"]').attr("src");
    let pos = require.toUrl("./");
    if (!pos.endsWith("/")) pos += "/";
    if ($(".html-title").length > 0) return;
    //$("head").children().last().after($(`<link rel="stylesheet" href="${pos}header.css">`));
    require("css!../struct/header.css");
    let headerHtml;
    $.get(pos + "../struct/header.html", null, (data) => {
        headerHtml = $(data);
        i_onLoad();
    })

    function i_onLoad() {
        let htbody = $("body");
        if (htbody.children().length > 0) htbody.children().eq(0).before(headerHtml);
        else htbody.append(headerHtml);
        let app = {
            data() {
                return {
                    globle_title: "ChobitsMC",
                    description: "",
                    title: "无标题页面",
                    items: [],
                    user: {
                        name: "noUser",
                        nick: "请登录",
                        href: "",
                        headimage: "",
                    },
                    pos: pos
                }
            },
            mounted() {
                if (headerApp_title != undefined) this.setTitle(headerApp_title);
                else if ($("title").length != 0) this.setTitle($("title").text());
                if (headerApp_description != undefined) this.setDescription(
                    headerApp_description);
                this.updateTitle();
            },
            methods: {
                setDescription(desc) {
                    this.description = desc;
                    this.updateTitle();
                },
                setTitle(title) {
                    this.title = title;
                    this.updateTitle();
                },
                updateTitle() {
                    if (this.description.length != 0) {
                        $("title").text(
                            `${this.title} - ${this.description} - ${this.globle_title}`
                        );
                    } else {
                        $("title").text(`${this.title} - ${this.globle_title}`);
                    }
                },
                setUser(name, nick = null, ) {
                    if (name == "*noInternet") {
                        this.user = {
                            name: "*noInternet",
                            nick: "网络异常",
                            href: pos + "../user/index.html",
                            headimage: pos + "../img/user/normal_100.png"
                        }
                    } else if (name == "noUser") {
                        this.user = {
                            name: "noUser",
                            nick: "请登录",
                            href: pos + "../login.html",
                            headimage: pos + "../img/user/normal_100.png"
                        }
                    } else {
                        this.user = {
                            name: name,
                            nick: nick,
                            href: pos + "../user/",
                            headimage: pos + "../user/headImage"
                        }
                    }
                }
            },
            computed: {}
        }
        console.log($(".html-title")[0]);
        headerApp = Vue.createApp(app).mount(".html-title");
        let h = $("html");
        $("#changeLineDisplay").on("click", () => {
            if(h.attr("debug") == "true") h.attr("debug", "false");
            else h.attr("debug", "true");
        });
        let cdm = $("#changeDesignMode");
        if(/:8848\//.test(window.location.href)){
            cdm.children().eq(0).text("切换至Springboot视图");
            cdm.on("mousedown", ()=>{
                window.location.href = window.location.href.replace(":8848/static/", ":8080/");
            })
        }
        else{
            cdm.children().eq(0).text("切换至设计视图");
            cdm.on("mousedown", ()=>{
                window.location.href = window.location.href.replace(":8080/", ":8848/static/");
            })
        }
        getGuides();
        getUser();
    }

    function getGuides() {
        $.getJSON(`${pos}../guidePages.json`, null, (data) => {
            headerApp.$nextTick(function() {
                let dests = []
                for (key in data) {
                    dests.push({
                        name: key,
                        href: pos + "../" + data[key]
                    })
                }
                this.items = dests;
            });
        })
    }

    function getUser() {
        $.ajax({
            type: "GET",
            url: pos + "../user/info",
            error: () => {
                setUser("*noInternet");
            },
            success: (data) => {
                //console.log(data);
                if (data.search("<html>") != -1) {
                    setUser("debug")
                    //console.log("检测到<html>")
                }
                try {
                    var info = JSON.parse(data);
                    if (info.status == "noUser") {
                        setUser("noUser");
                        //console.log("状态为NoUser")
                    } else if (info.status == "OK") {
                        setUser(info.content.name, info.content.nick);
                        //console.log("状态为OK")
                    }
                } catch (ex) {
                    //console.log(ex);
                    setUser("debug");
                }
            }
        });

        function setUser(name, nick) {
            headerApp.$nextTick(function() {
                this.setUser(name, nick);
            });
        }
    }
    //});

    exportObj.setTitle = function(title) {
        headerApp_title = title;
        if (headerApp != undefined) headerApp.$nextTick(function() {
            this.setTitle(title);
        });
    }

    exportObj.setDescription = function(desc) {
        headerApp_description = desc;
        if (headerApp != undefined) headerApp.$nextTick(function() {
            this.setTitle(title);
        });
    }
    exportObj.getVueApp = function() {
        return headerApp;
    }
    window.html_header = exportObj;
    return exportObj;
});
